<template>
  <div class="index-container">
    <div class="page-head">
      <vab-list-notice :content-array="contentArray" />
    </div>

    <div class="page-content">
      <vab-card shadow="hover">
        <template #header>
          <span>功能配置</span>
        </template>
        <el-form label-width="160px" :model="form" style="width: 45%">
          <el-form-item label="自动弃海功能">
            <el-radio-group v-model="form.autoInvalid">
              <el-radio :value="0">不启用</el-radio>
              <el-radio :value="1">超3天未跟进</el-radio>
              <el-radio :value="2">超7天未跟进</el-radio>
              <el-radio :value="3">超15天未跟进</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每日捞取上线">
            <el-input
              v-model="form.maxNums"
              style="max-width: 300px"
              placeholder="Please input"
            >
              <template #append>条</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </vab-card>
    </div>
  </div>
</template>

<script>
  import { getList } from '@/api/custom'
  import VabListNotice from '@/plugins/VabListNotice'
  export default defineComponent({
    name: 'CustomConfigure',
    components: { VabListNotice },
    setup() {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        list: [],
        listLoading: true,
        form: {
          autoInvalid: 0,
          maxNums: 50,
        },
        contentArray: [
          '可在本页面配置自动弃海时间、红娘每日领取限额、导出模板自定义字段',
        ],
      })

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list },
        } = await getList(state.queryForm)
        state.list = list
        state.listLoading = false
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const handlePlay = (status) => {
        if (status)
          $baseMessage('模拟停用成功', 'success', 'vab-hey-message-success')
        else $baseMessage('模拟开启成功', 'success', 'vab-hey-message-success')
      }
      const handleAdd = () => {
        $baseMessage('模拟添加成功', 'success', 'vab-hey-message-success')
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        fetchData,
        queryData,
        handlePlay,
        handleAdd,
      }
    },
  })
</script>

<style lang="scss" scoped>
  $base: '.index';
  #{$base}-container {
    background: $base-color-background !important;
    padding: 0 !important;
  }

  .page-head {
    padding: $base-padding $base-padding 0 $base-padding;
    margin-bottom: $base-margin;
    background: var(--el-color-white);
    border: 1px solid #ebeef5;
  }
  .page-content {
    // 这里的height变量是从mixin中获取的
    height: calc(100% - var(--height));
    background-color: #fff;
    margin-top: 16px;
    padding: 16px;
    border-radius: 4px;
  }
</style>
